<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/common.jspf"%>
<%@ include file="/common/taglibs.jspf"%>

<html lang="en">
<head>
<title><s:message code="login.ui.title" /></title>
<script type="text/javascript"
	src="${contextPath}/static/widgets/avatar/scripts/swfobject.js"></script>
<script type="text/javascript"
	src="${contextPath}/static/widgets/avatar/scripts/fullAvatarEditor.js"></script>
</head>
<body>
	<div>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#basic" data-toggle="tab"><s:message
						code="profile.ui.tab.basic" /></a></li>
			<li><a href="#avatar" data-toggle="tab"><s:message
						code="profile.ui.tab.avatar" /></a></li>
			<li><a href="#tenant" data-toggle="tab"><s:message
						code="profile.ui.tab.tenant" /></a></li>
			<li><a href="#messageSub" data-toggle="tab"><s:message
						code="profile.ui.tab.messageSub" /></a></li>
		</ul>

		<div class="tab-content ">
			<div class="tab-pane active" id="basic">
				<form id="basic-form" action="update.json" method="POST"
					class="form-horizontal">
					<fieldset>
						<legend>
							<s:message code="profile.ui.fieldset.general" />
						</legend>
						<div class="control-group">
							<label class="control-label"><s:message
									code='userInfo.userName' /></label>
							<div class="controls">
								<input type="text" name="userName" value='' />
							</div>
						</div>
						<div class="control-group">
							<label class="control-label"><s:message
									code='resetPassword.newPassword' /></label>
							<div class="controls">
								<div class="input-prepend">
									<span class="add-on"><i class="icon-lock"></i></span> <input
										class="" type="password" id="newPassword"
										placeholder="<s:message code='resetPassword.newPassword' />"
										name="newPassword" />
								</div>
								<span class="help-block hide"><s:message
										code='register.password.help' /></span>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label"><s:message
									code='login.rpassword' /></label>
							<div class="controls">
								<div class="input-prepend">
									<span class="add-on"><i class="icon-ok"></i></span> <input
										class="" type="password" id="rpassword"
										placeholder="<s:message code='login.rpassword' />"
										name="rpassword" />
								</div>
								<span class="help-block hide"><s:message
										code='login.rpassword.help' /></span>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label"><s:message
									code='userInfo.nickName' /></label>
							<div class="controls">
								<input type="text" name="nickName" value='' />
							</div>
						</div>
						<div class="control-group">
							<label class="control-label"><s:message
									code='userInfo.gender' /></label>
							<div class="controls">
								<select id="gender" name="gender">
									<li:dictOptions dictType="0002" />
								</select>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label"><s:message
									code='userInfo.email' /></label>
							<div class="controls">
								<input type="text" name="email" value='' />
							</div>
						</div>
						<div class="control-group">
							<label class="control-label"><s:message
									code='userInfo.mobile' /></label>
							<div class="controls">
								<input type="text" name="mobile" value='' />
							</div>
						</div>
					</fieldset>
					<fieldset>
						<legend>
							<s:message code="profile.ui.fieldset.setting" />
						</legend>
						<div class="control-group">
							<label class="control-label"><s:message
									code='userInfo.locale' /></label>
							<div class="controls">
								<select name="locale">
									<li:dictOptions dictType="0003" />
								</select>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label"><s:message
									code='userInfo.timezone' /></label>
							<div class="controls">
								<select name="timezone">
									<li:dictOptions dictType="0004" />
								</select>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label"><s:message
									code='userInfo.theme' /></label>
							<div class="controls">
								<select name="theme">
									<li:dictOptions dictType="0005" />
								</select>
							</div>
						</div>
					</fieldset>
					<div class="form-actions">
						<button type="submit" class="btn btn-primary"
							data-loading-text="<s:message code='common.processing' />">
							<i class="icon-ok"></i>
							<s:message code="btn.submit" />
						</button>
					</div>
				</form>
			</div>
			<div class="tab-pane" id="avatar">
				<div id="swfContainer">
					本组件需要安装Flash Player后才可使用，请从<a
						href="http://www.adobe.com/go/getflashplayer">这里</a>下载安装。
				</div>

				<!-- 添加状态 -->
			</div>
			<div id="modifyEmailDiv" class="modal hide fade">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<div>
						<h5>修改邮箱</h5>
					</div>
				</div>
				<div class="modal-body">
					<form class="form-inline">
						<label>新邮箱地址：</label> <input type="email" id='newEmail'
							placeholder="输入新邮箱地址" required> <input type="button"
							class="btn btn-primary" onclick="sendAuthCode(this)"
							value="获取验证码"></input>
					</form>
					<form class="form-inline">
						<label>输入验证码：</label> <input type="text" id='authCode'
							placeholder="输入验证码">
					</form>
				</div>
				<div class="modal-footer">
					<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
					<button class="btn btn-primary" onclick="submitNewEmail()">确定</button>
				</div>
			</div>
			<script type="text/javascript">
          $(document).ready(function(){
            var url = "<c:if test='${not empty SESSION_USER.headImgUrl }'>${contextPath}/upload/avatar/${SESSION_USER.headImgUrl }_1.jpg</c:if><c:if test='${empty SESSION_USER.headImgUrl }'>${contextPath}/upload/avatar/avatar.jpg</c:if>";
            var swf = new fullAvatarEditor("${contextPath}/static/widgets/avatar/fullAvatarEditor.swf", "${contextPath}/static/widgets/avatar/expressInstall.swf", "swfContainer", {
  				    id : 'swf',
  					upload_url : 'avatar.json',	//上传接口
  					method : 'post',	//传递到上传接口中的查询参数的提交方式。更改该值时，请注意更改上传接口中的查询参数的接收方式
  					src_upload : 0,		//是否上传原图片的选项，有以下值：0-不上传；1-上传；2-显示复选框由用户选择
  					src_url : url,
  					avatar_box_border_width : 0,
  					avatar_sizes : '100*100|64*64|32*32',
  					avatar_sizes_desc : '100*100像素|64*64像素|32*32像素'
  				}, function (msg) {
  					switch(msg.code)
  					{
  						case 1 : break;
  						case 2 : 
  							break;
  						case 3 :
  							if(msg.type == 0)
  							{
  								
  							}
  							else if(msg.type == 1)
  							{
  								alert("摄像头已准备就绪但用户未允许使用！");
  							}
  							else
  							{
  								alert("摄像头被占用！");
  							}
  						break;
  						case 5 : 
  							if(msg.type == 0)
  							{
  								
  							}
  						break;
  					}
  				}
  			);
          });
          
         
         var wait=60; 
         function sendAuthCode(o){
        	 $.webtools.ajax({
					url: "${contextPath}/common/user/sendAuthCode.json",
					params: {"newEmail":$("#newEmail").val()},
					success: function(reply) {
						if(reply.result=="success"){  
							wait = 60; 
							time(o);
						}
					}
				});	
         }
         
         function time(o) {  
             if (wait == 0) {  
                 o.removeAttribute("disabled");            
                 o.value="获取验证码";  
                 wait = 60;  
             } else {  
                 o.setAttribute("disabled", true);  
                 o.value="重新发送(" + wait + ")";  
                 wait--;  
                 setTimeout(function() {  
                     time(o)  
                 },  
                 1000)  
             }  
         } 
         
         function submitNewEmail(){
        	 $.webtools.ajax({
					url: "${contextPath}/common/user/submitNewEmail.json",
					params: {"newEmail":$("#newEmail").val(), "authCode":$("#authCode").val()},
					success: function(reply) {
							 $("#modifyEmailDiv").modal('hide'); 
							 $("#newEmail").val("");
							 $("#authCode").val("");
							 location.reload();
						
					}
				});	 
         }
         

          </script>
			<div class="tab-pane" id="tenant">
				<div class="alert alert-info">
					<s:message code="profile.ui.currentTenant" />
					: <strong>${currentTenant.tenantAlias }</strong>
				</div>
				<table
					class="table table-striped table-bordered table-hover datatable">
					<thead>
						<tr>
							<th><s:message code="tenant.tenantCode"></s:message></th>
							<th><s:message code="tenant.tenantAlias"></s:message></th>
							<th><s:message code="tenant.status"></s:message></th>
							<th><s:message code="tenant.maxMembers"></s:message></th>
							<th><s:message code="tenant.expiredDate"></s:message></th>
							<th><s:message code="common.action" /></th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${tenantList }" var="row">
							<tr>
								<td><c:out value="${row.tenantCode }" /></td>
								<td><c:out value="${row.tenantAlias }"></c:out>&nbsp;[<a
									href="javascript:;" class="blue"
									onclick="switchTenant(${row.id});"><s:message
											code="tenant.func.switch" /></a>]</td>
								<td style="text-align: center"><s:message
										code="tenant.status.${row.status }" /></td>
								<td style="text-align: right"><c:out
										value="${row.maxMembers }"></c:out></td>
								<td style="text-align: center"><c:out
										value="${li:formatDate(row.expiredDate) }"></c:out></td>
								<td class="action-buttons">
									<div class="action-buttons">
										<a href="edit.do?id=${row.id }" class="blue"> <i
											class="icon-pencil"></i>
										</a> <span class="vbar"></span> <a href="javascript:;" class="red"
											onclick="rowActivate(${row.id});"> <i
											class="fa fa-sign-out"></i>
										</a>
									</div>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
			<div class="tab-pane" id="messageSub">
				<div class="alert alert-info">
					<s:message code="userMessageSub.ui.help" />
				</div>
				<button type="button" class="btn btn-primary"
					onclick="subMessageAll();">
					<s:message code="userMessageSub.func.subAll"></s:message>
				</button>
				&nbsp;
				<button type="button" class="btn btn-warning"
					onclick="unsubMessageAll();">
					<s:message code="userMessageSub.func.unsubAll"></s:message>
				</button>
				<c:forEach items="${messageModules }" var="module">
					<h4>
						<s:message code="message.module.${module.code }" />
					</h4>
					<table
						class="table table-striped table-bordered table-hover datatable">
						<thead>
							<tr>
								<th><s:message code="message.code"></s:message></th>
								<th><s:message code="message.name"></s:message></th>
								<th><s:message code="message.channel"></s:message></th>
								<th><s:message code="common.action" /></th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${module.metas }" var="message">
								<tr>
									<td><c:out value="${message.code }" /></td>
									<td><s:message
											code="message.module.${module.code }.${message.code }"></s:message></td>
									<td><c:forEach items="${channels }" var="channel">
											<label class="checkbox inline"><input type="checkbox">
												<s:message code="message.channel.${channel }"></s:message></label>
										</c:forEach></td>
									<td>
										<div class="action-buttons">
											<button type="button" class="btn btn-small"
												onclick="subMessage('${message.code  }')">
												<s:message code="userMessageSub.func.subscribe"></s:message>
											</button>
										</div>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</c:forEach>
			</div>
		</div>
	</div>

	<!-- inline scripts related to this page -->
	<script type="text/javascript">
$(document).ready(function(){	
	
	$('#basic-form').littFormSubmit({		
		rules : {
			userName: {
                required: true
            },
            gender: {
            	required: true
            },
            email: {
            	required: true,
            	email: true
            },
            mobile: {
            	required: true
            },
            newPassword: {
                required: true,
				minlength: 6,
				maxlength: 50
            },
            rpassword: {
            	required: true,
				minlength: 6,
				maxlength: 50,
                equalTo: "#newPassword"
            }
		},	
		success: function(reply){			
			$.webtools.alert({
				containerId: "basic-form",
				type: "success",
				hide: true,
				overwrite: false,
				position: "prepend",
				message: "<s:message code='updateProfile.success.message' />"				
			}); 				
		}
	});
	
});	

function switchTenant(tenantId)
{
	bootbox.confirm("<s:message code='tenantMember.func.switch.confirm' />", function(result){
		if(result)
		{
			$.webtools.ajax({
				url: "switchTenant.json",
				params: {"tenantId":tenantId},
				success: function(reply) {
					location.reload();
				}
			});	
		}
	});		
}


function subMessageAll()
{
  $.webtools.ajax({
      url: "subscribeAll.json",
      params: {},
      success: function(reply) {
        //location.reload();
      }
    }); 
}


</script>
</body>
</html>